<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>数据管理demo</title>
    <style type="text/css">
        .tr:hover {
            background-color: #ccc;
        }
    </style>

</head>

<body>
    别名(key):
    <input type="" name="" id="name" value="" />
    <br /> 网站名：
    <input type="" id="Webname" />
    <br /> 网址：
    <input type="" id="Web" />
    <br />
    <input type="button" name="" id="" value="点击提交信息" onclick="func1()" />
    <br />
    <h4>网站登录</h4> 网站名：
    <input type="" id="loginName" />
    <br /> 网址： 网址
    <input type="" id="loginPwd" />
    <br />
    <button onclick="login()">登录</button>

    <h1>已经储存的网站</h1>
    <input type="button" value="删除网站" onclick="delSite()" />
    <br />

    <input type="text" placeholder="别名" id="search1" />
    <input type="text" placeholder="网站名" id="search2" />
    <input type="text" placeholder="网址" id="search3" />
    <input type="button" name="" id="" value="查询网站" onclick="searchSite()" />

    <table style="width: 500px;border-collapse: collapse;" border="1" id="table">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="checkAll" onclick="checkAll()" />
                </th>
                <th>序号</th>
                <th>别名</th>
                <th>网站名</th>
                <th>网站</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>

    <!--<div style="width: 100vw;height: 100vh;background-color: blue;position: absolute; top: 0px;left: 0px;">
            <div id=""   style="width: 300px;height: 200px;background-color: red;">
 
            </div>
        </div>
            -->

    别名(key):
    <input type="" name="" id="name1" value="" />
    <br /> 网站名：
    <input type="" id="Webname1" />
    <br /> 网址：
    <input type="" id="Web1" />
    <br />
    <input type="button" name="" id="" value="修改确定" onclick="dateSites1()" />

    <script>
        //注册

        function func1() {
            var name = document.getElementById("name").value;
            var Webname = document.getElementById("Webname").value;
            var Web = document.getElementById("Web").value;
            var site = {
                name: name,
                Webname: Webname,
                Web: Web
            }
            if (localStorage.sites == undefined) {
                var arr = [];
            } else {
                var str = localStorage.sites;
                var arr = JSON.parse(str);
            }
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].name == name) {
                    alert("姓名已经注册");
                    return;
                }
            }

            arr.push(site);
            var str = JSON.stringify(arr);
            localStorage.sites = str;
            alert("储存完毕");
            showAllSite();
        }

        //展示
        function showAllSite() {
            if (localStorage.sites == undefined) {
                return;
            }
            var str = localStorage.sites;
            var arr = JSON.parse(str);
            var html = "";
            arr.forEach(function (item, index) {
                html += "<tr class='tr' onclick='chooseInput(" + index + ")'   ondblclick='dateSites(" + index +
                    ")'><td><input type='checkbox' value='" + index + "' class='checkbox'/></td><td>" + (index +
                        1) + "</td><td>" + item.name + "</td><td>" + item.Webname + "</td><td>" + item.Web +
                    "</td></tr>";
            });
            var tbody = document.getElementById("tbody");
            tbody.innerHTML = html;
        }
        //进来刷新
        window.onload = function () {
            showAllSite();
        }
        //登录
        function login() {
            var loginName = document.getElementById("loginName").value;
            var loginPwd = document.getElementById("loginPwd").value;
            var str = localStorage.sites ? localStorage.sites : "[]";
            var arr = JSON.parse(str);
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].Webname == loginName && arr[i].Web == loginPwd) {
                    alert("登录成功！");
                    var loginUser = JSON.stringify(arr[i]);
                    sessionStorage.loginUser = loginUser;
                    location = "跳转.html";
                    return;
                }

            }
            alert("登录失败！！！");

        }

        /*window.onload = function(){
        　　var div1 = document.getElementById("div11");
        　　div1.onmousedown = function(ev){
        　　　　var oevent = ev || event;
         
        　　　　var distanceX = oevent.clientX - div1.offsetLeft;
        　　　　var distanceY = oevent.clientY - div1.offsetTop;
         
        　　　　document.onmousemove = function(ev){
        　　　　　　var oevent = ev || event;
        　　　　　　div1.style.left = oevent.clientX - distanceX + 'px';
        　　　　　　div1.style.top = oevent.clientY - distanceY + 'px';
        　　　　};
        　　　　document.onmouseup = function(){
        　　　　　　document.onmousemove = null;
        　　　　　　document.onmouseup = null;
        　　　　};
            }
        };*/

        /*单击tr选中tr里面的input*/
        function chooseInput(index) {
            var checkboxs = document.getElementsByClassName("checkbox")[index];
            if (checkboxs.checked) {
                checkboxs.checked = false;
            } else {
                checkboxs.checked = true;
            }

        }

        //点击全选的input

        function checkAll() {
            var thisInput = document.getElementById("checkAll");
            var checkboxs = document.getElementsByClassName("checkbox");
            for (var i = 0; i < checkboxs.length; i++) {
                if (thisInput.checked) {
                    checkboxs[i].checked = true;
                } else {
                    checkboxs[i].checked = false;
                }
            }
        }

        /*删除*/

        function delSite() {
            var checkboxs = document.getElementsByClassName("checkbox");
            var count = 0;
            var str = localStorage.sites;
            var arr = JSON.parse(str);

            for (var i = 0; i < checkboxs.length; i++) {
                if (checkboxs[i].checked) {
                    var index = parseInt(checkboxs[i].value) - count;
                    arr.splice(index, 1);
                    count++;
                }
            }

            localStorage.sites = JSON.stringify(arr);
            if (count == 0) {
                alert("请至少选择一项");
            } else {
                alert("删除成功，删除了" + count + "项");
                showAllSite();
            }

        }

        /*
         * 查询网站
         */
        function searchSite() {
            var name = document.getElementById("search1").value;
            var Webname = document.getElementById("search2").value;
            var Web = document.getElementById("search3").value;
            var str = localStorage.sites;
            var arr = JSON.parse(str);
            var newArr = []; //用于装载，符合条件的数据
            for (var i = 0; i < arr.length; i++) {
                var isWzm = true,
                    isBm = true,
                    isWz = true;

                if (arr[i].name.indexOf(name) == -1 && name != "") {
                    isWzm = false;
                }
                if (arr[i].Webname.indexOf(Webname) == -1 && Webname != "") {
                    isBm = false;
                }
                if (arr[i].Web != Web && Web != "") {
                    isWz = false;
                }

                if (isWzm && isBm && isWz) {
                    arr[i].index = i; // 把查询出的数据，在localStorage里面的下标，暂存到新数组的每个对象的index属性上
                    newArr.push(arr[i]);
                }
            }

            var html = "";
            console.log(newArr);
            newArr.forEach(function (item, index) {
                html += "<tr class='tr' onclick='chooseInput(" + index +
                    ")'><td align='center'><input type='checkbox' value='" + item.index +
                    "' class='checkbox' /></td><td>" + (index + 1) + "</td><td>" + item.name + "</td><td>" +
                    item.Webname + "</td><td>" + item.Web + "</td></tr>";
            });
            var tbody = document.getElementById("tbody");
            tbody.innerHTML = html;

        }

        //修改网站
        var updateIndex = 0;

        function dateSites(index) {
            alert(index);
            var str = localStorage.sites;
            var arr = JSON.parse(str);
            document.getElementById("name1").value = arr[index].name;
            document.getElementById("Webname1").value = arr[index].Webname;
            document.getElementById("Web1").value = arr[index].Web;
            updateIndex = index;

        }

        function dateSites1() {
            var str = localStorage.sites;
            var arr = JSON.parse(str);
            var name = document.getElementById("name1").value;
            var Webname = document.getElementById("Webname1").value;
            var Web = document.getElementById("Web1").value;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].name == name) {
                    alert("网站名已经注册，请更换网站名");
                    return;
                }
            }
            var site = {
                name: name,
                Webname: Webname,
                Web: Web,
            };
            arr.splice(updateIndex, 1, site);
            localStorage.sites = JSON.stringify(arr);

            showAllSite();
        }
    </script>

</body>

</html>